<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body style="margin: auto;width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px; width:800px;"></div>
<script src="js/echarts-all.js"></script>
<!--<script src="js/params.js"></script>-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['主城9区','渝西南','渝西北','渝东南','渝东北']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        series : [
            {
                name:'渝东南',
                type:'pie',
                selectedMode: 'single',
                radius : [0, 70],

                // for funnel
                x: '20%',
                width: '40%',
                funnelAlign: 'right',
                max: 1548,

                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner'
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                data:[
                    {value:90, name:'主城9区'},
                    {value:30, name:'渝东南'},
                    {value:55, name:'渝东北'},
                    {value:30, name:'渝西南'},
                    {value:20, name:'渝西北', selected:true}
                ]
            },
            {
                name:'主城9区',
                type:'pie',
                radius : [100, 140],

                // for funnel
                x: '60%',
                width: '35%',
                funnelAlign: 'left',
                max: 1048,

                data:[
                    {value:10, name:'渝中区'},
                    {value:10, name:'沙坪坝区'},
                    {value:5, name:'南岸区'},
                    {value:15, name:'北碚区'},
                    {value:10, name:'江北区'},
                    {value:17, name:'渝北区'},
                    {value:3, name:'大渡口区'},
                    {value:10, name:'九龙坡区'},
                    {value:10, name:'巴南区'},

                    {value:5, name:'黔江区'},
                    {value:5, name:'石柱'},
                    {value:5, name:'彭水'},
                    {value:5, name:'酉阳'},
                    {value:5, name:'秀山'},
                    {value:5, name:'武隆县'},


                    {value:5, name:'万州'},
                    {value:5, name:'开县'},
                    {value:5, name:'梁平'},
                    {value:5, name:'云阳'},
                    {value:5, name:'奉节'},
                    {value:5, name:'巫山'},
                    {value:5, name:'巫溪'},
                    {value:5, name:'忠县'},
                    {value:5, name:'垫江'},
                    {value:5, name:'丰都'},
                    {value:5, name:'城口'},


                    {value:5, name:'江津'},
                    {value:10, name:'南川'},
                    {value:5, name:'綦江'},
                    {value:10, name:'万盛'},


                    {value:20, name:'51'}
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>